<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>gobang</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" th:href="@{/css/index.css}" />
</head>
<body>
	<div id="gob_container" class="gob_container">
		<!-- <table id="gob_board" cellspacing=0 cellpadding=0></table> -->
		<canvas id="gob_board" class="gob_borad"></canvas>
		<div id="gob_panel" class="gob_panel_right">
			<div class="sys_title">对战信息</div>
			<div  class="sys_panel">
				<input type="text" id="userId" placeholder="阁下尊姓大名？" style="height: 34px" />
				<input type="button" class="sys_btn" id="start" value="开始" />
				<div class="zy black" zy="black">黑棋</div>
				<div class="zy white" zy="white">白棋</div>
			</div>
			<div class="sys_title">操作面板</div>
			<div class="sys_panel">
				<input type="button" class="sys_btn" id="restart" value="重新开始" disabled="disabled"/>
				<input type="button" class="sys_btn" id="black" value="悔棋" disabled="disabled"/>
				<input type="button" class="sys_btn" id="surrender" value="我投翔~" disabled="disabled"/>
				<input type="button" id="btn_calc" />
			</div>
			<!-- 聊天框 -->
			<div class="sys_title">通知/聊天</div>
			<div id="sys_message" class="sys_message">
				
			</div>
			<input type="text" id="message" class="message"  disabled="disabled"/>
			<input type="button" id="sendMsg" class="sys_btn sendMsg" value="发送" disabled="disabled"/>
		</div>
	</div>
	
	<script th:src="@{/js/jquery-1.9.1.min.js}"></script>
	<script th:src="@{/js/gobang.js}"></script>
	<script type="text/javascript">
		var userId;
		var isOpen = false; // 标识是否建立连接
		var $blackOrWhite = ''; // 阵营 black or white
		$('#start').on('click', function() {
			userId = $('#userId').val();
			if( userId == '' ) {
				userId = '匿名网友';
			}
			connectWebScoket();
			$('.black').css('display','inline-block');
			$('.white').css('display','inline-block');
			$('#userId').hide();
			$(this).hide();
		});
	
		var webSocket = null;
		
		// 建立连接
		function connectWebScoket() {
			webSocket = new WebSocket('ws://39.105.152.144:8888/gobang/id='+userId);
		
			webSocket.onopen = function() {
				isOpen = true;
				showSysMsg(' 连接建立成功~');
				showSysMsg(' 请选择【黑棋】或【白棋】');
				$('#restart').removeAttr("disabled");
				$('#black').removeAttr("disabled");
				$('#surrender').removeAttr("disabled");
				$('#message').removeAttr("disabled");
				$('#sendMsg').removeAttr("disabled");
			}
			
			webSocket.onclose = function() {
				console.log('close');
			}
			
			webSocket.onmessage = function(msg) {
				var data = msg.data;
				data = $.parseJSON(data);
				console.log(data);
				if( data.type == 1 ) {
					$('#sys_message').append('<div class="user_msg">> '+data.id+'： '+data.message+'</div>');
				}else if( data.type == 0 ) {
					$('#sys_message').append('<div class="sys_msg">> 系统消息： '+data.message+'</div>');
				}else if( data.type == 2 ) {
					var blackOrWhite = data.blackOrWhite;
					var x = data.x;
					var y = data.y;
					if( typeof(x) != 'undefined' && typeof(y) != 'undefined' ) {
						drawPiece(x, y, blackOrWhite);
					}else{
						if( blackOrWhite == 'black' ) {
							$('.black').attr('userId', data.id);
							$('.black').attr('checked', 'checked');
							$('.black').html(data.id);
							$('.black').css({'border': '2px solid red'});
							
							
						}else {
							$('.white').attr('userId', data.id);
							$('.white').attr('checked', 'checked');
							$('.white').html(data.id);
							$('.white').css({'border': '2px solid red'});
							
						}
					}
					
				}
				$('#sys_message').scrollTop($('#sys_message')[0].scrollHeight );
			}
		}
		
		// 发送消息 type=0为系统消息 type=1为用户消息 type=2为对战信息
		function sendMessage(type, msg, blackOrWhite, x, y) {
			alert(msg);
			var jsonObj = {};
			jsonObj.id = userId;
			jsonObj.message = msg;
			jsonObj.type = type;
			jsonObj.blackOrWhite = blackOrWhite;
			jsonObj.x = x;
			jsonObj.y = y;
			webSocket.send(JSON.stringify(jsonObj));
			$('#message').val('');
		}
		
		//关闭连接
		function closeWebSocket(){
			 if( webSocket != null ) {
			 	webSocket.close();
		     }
		}
		
		$('#sendMsg').on('click', function() {
			sendMessage(1, $('#message').val());
		});
		// 回车事件
		$(document).keyup(function(event){
		  if(event.keyCode ==13){
			  sendMessage(1, $('#message').val());
		  }
		});
		
		// 选择阵营
		$('.zy').on('click', function() {
			$blackOrWhite = $(this).attr('zy');
			
			var uid = $(this).attr('userId'); 
			
			if( typeof(uid) == 'undefined' ) {
				sendMessage(2, '', $blackOrWhite);
			}
		});
	</script>
</body>
</html>